<template>
	<view class="con">
		<!-- 头部 -->
		<view class="top flex flex_between">
			<view class="topz flex">
				<image class="topz_img" v-if="isLogout===1" src="/static/mine/nologin.png"></image>
				<image class="topz_img" v-if="isLogout===2" :src="userInfo.head=='/static/mine/img28.png'?'/static/mine/nologin.png':userInfo.head"></image>
				<!-- 如果是退出状态-并且用户信息没有昵称，则去注册 -->
				<view class="topzc" v-if="isLogout===1&&!isRegister" @click="showTan">
					<view class="topzc_v1">还没登录哦</view>
					<view class="topzc_v2 flex">
						<view class="weideng">点击登录/注册</view>
					</view>
				</view>
        <!-- 如果是退出状态-并且用户信息昵称，则去授权 -->
        <button class="topzc" v-if="isLogout===1&&isRegister" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" @click="showTan">
        	<view class="topzc_v1">还没登录哦</view>
        	<view class="topzc_v2 flex">
        		<view class="weideng">点击登录/注册</view>
        	</view>
        </button>
        <!-- 已注册-未授权 -->
    <!--    <button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhone">授权手机号并登录</button> -->
				<!-- 不是退出状态 -->
				<view class="topzc" v-if="isLogout===2">
					<view class="topzc_v1">{{userInfo.nikename}}</view>
					<view class="topzc_v2 flex">
						<image class="topzc_v2_img" mode="widthFix" src="/static/mine/img03.png"></image>
						<view class="topzc_v2_v">100001</view>
					</view>
				</view>
        
			</view>
			<view class="topy flex">
				<navigator hover-class="none" url="/packageA/mine/invite">
					<image class="topy_img" src="/static/mine/img04.png" mode="widthFix"></image>
				</navigator>

				<view @click="goSet">
					<image class="topy_img" src="/static/mine/img05.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 中间内容 -->
		<view class="main">
			<view class="main_t flex flex_between">
				<view class="main_tz flex">
					<image class="main_tz_img" src="/static/mine/img06.png" mode="widthFix"></image>
					<view class="main_tz_c">尊贵的V9星耀合伙人</view>
				</view>
				<navigator hover-class="none" url="/packageA/mine/equity" class="main_tY">查看权益</navigator>
			</view>
			<view class="main_c">
				<view class="main_c1 flex flex_between">
					<view class="main_c1_t">
						<view class="main_c1_tv1">总收益(元)</view>
						<view class="main_c1_tv2">62569.50</view>
					</view>
					<navigator hover-class="none" url="/packageA/mine/wallet" class="main_c1_y">
						<image class="main_c1_y_img" src="/static/mine/img07.png" mode="widthFix"></image>
						<text class="main_c1_y_t">钱包</text>
					</navigator>
				</view>
				<view class="main_c2 flex flex_between">
					<view class="main_c2li">
						<view class="main_c2li_v1">可提现(元)</view>
						<view class="main_c2li_v2">569.50</view>
					</view>
					<view class="main_c2li">
						<view class="main_c2li_v1">今日预估(元)</view>
						<view class="main_c2li_v2">2580.50</view>
					</view>
					<view class="main_c2li">
						<view class="main_c2li_v1">本月预估(元)</view>
						<view class="main_c2li_v2">6685.50</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 导航列表 -->
		<view class="navList flex flex_between">
			<navigator hover-class="none" url="/packageA/mine/team" class="navListli">
				<image class="navListli_img" src="/static/mine/img08.png" mode="widthFix"></image>
				<view class="navListli_t">我的团队</view>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/invite" class="navListli">
				<image class="navListli_img" src="/static/mine/img09.png" mode="widthFix"></image>
				<view class="navListli_t">邀请好友</view>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/revenueDetails" class="navListli">
				<image class="navListli_img" src="/static/mine/img10.png" mode="widthFix"></image>
				<view class="navListli_t">我的收益</view>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/course" class="navListli">
				<image class="navListli_img" src="/static/mine/img11.png" mode="widthFix"></image>
				<view class="navListli_t">我的课程</view>
			</navigator>
		</view>
    <view class="navList flex flex_between">
    	<navigator hover-class="none" url="/packageA/mine/crossBorder" class="navListli">
    		<image class="navListli_img" src="/static/mine/img30.png" mode="widthFix"></image>
    		<view class="navListli_t">我的跨境</view>
    	</navigator>
    	<navigator hover-class="none" url="/packageA/mine/subsidy" class="navListli">
    		<image class="navListli_img" src="/static/mine/img31.png" mode="widthFix"></image>
    		<view class="navListli_t">我的补贴</view>
    	</navigator>
    	<navigator hover-class="none" url="/packageA/index/address" class="navListli">
    		<image class="navListli_img" src="/static/mine/img32.png" mode="widthFix"></image>
    		<view class="navListli_t">我的快递</view>
    	</navigator>
    	<navigator hover-class="none" url="/packageA/mine/myProductOperation" class="navListli">
    		<image class="navListli_img" src="/static/mine/img33.png" mode="widthFix"></image>
    		<view class="navListli_t">我的运营</view>
    	</navigator>
    </view>
		<!-- 列表 -->
		<view class="mlist">
			<navigator hover-class="none" url="/packageA/mine/questions?type=gongGao" class="mlistli flex flex_between">
				<view class="mlistliz fl">官方公告</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/questions?type=wenTi" class="mlistli flex flex_between">
				<view class="mlistliz fl">常见问题</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
<!-- 			<navigator hover-class="none" url="/packageA/mine/questions?type=guiZe" class="mlistli flex flex_between">
				<view class="mlistliz fl">平台规则</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/questions?type=jianYi" class="mlistli flex flex_between">
				<view class="mlistliz fl">投诉建议</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator> -->
		</view>
		<!-- 未登录的时候--点击获取昵称，头像 -->
		<view class="zhezhao" v-if="isShow" @click="hideTan"></view>
		<view class="logint" v-if="isShow">
			<!-- <image class="logint1" src="/static/mine/img28.png" mode="widthFix"></image>
      <view class="logint2">点击获取昵称</view>
      <view class="logint3">登录/注册</view> -->
			<!-- 头像 -->
			<view class="pictrue">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
			</view>
			<!-- 昵称 -->
			<input type="nickname" class="nicheng" placeholder="点击获取昵称" maxlength="10" v-model="userInfo.nikename"
				@change="onChooseName" />
			<view class="logint_btn" @click="loginBtn">登录/注册</view>
			<view class="logint_di flex">
				<view class="logint_di1">
					<image class="logint_di1_img" src="/static/mine/img29.png" mode="widthFix"></image>
				</view>
				<view class="logint_di2">勾选即代表您已同意《用户协议》</view>
			</view>
		</view>
	</view>
</template>

<script>
  import {
    getLoginUser,//获取(添加)用户信息
    getUserUpdate, //修改用户信息
  } from '@/request/api.js'
	export default {
		data() {
			return {
        openid:uni.getStorageSync('openid'),//获取缓存的openid
				isShow: false,
        isLogout:uni.getStorageSync('isLogout') || 1,//是否退出状态
				isRegister: false,//是否注册
				avatarUrl: "/static/mine/img28.png", //头像
				userName:'',//昵称
				userInfo:{
          head:'/static/mine/nologin.png',
          nikename:''
        } //获取登录后的对象
			}
		},
		onLoad() {
      
    
		},
    onShow() {
      console.log('ggggggggggggggg')
      console.log(uni.getStorageSync('isLogout'))
      console.log(uni.getStorageSync('userInfo'))
      console.log(this.userInfo)
      this.getLoginUserFun() //获取用户信息--通过接口
    },
		methods: {
      // 获取用户信息--通过接口
      getLoginUserFun(){
        getLoginUser({
          openid:this.openid,
          pid:uni.getStorageSync('pid') || ''
        }).then(res=>{
          console.log('获取(添加)用户信息')
          console.log(res)
          if(res.error_code===0){
            if(res.data.nikename===''){
              console.log('还没有注册')
              this.isRegister = false
            }else{
              console.log('已经注册-直接授权')
              this.isRegister = true
              this.userInfo.head = res.data.head?res.data.head:'/static/mine/nologin.png'
              this.userInfo.nikename = res.data.nikename
              uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
            }
          }else{
            uni.showToast({
              icon:'none',
              title:res.msg
            })
          }
        })
      },
      
			showTan() {
        // 判断是否是第一次注册,如果是第一次注册(返回的用户信息里面没有昵称,则弹出头像和昵称框,去选择);反之,则直接弹出授权
        console.log('mmmmmmmmmmmmmmm')
        console.log(this.isRegister)
        if(!this.isRegister){
          console.log('zou_11111')
          this.isShow = true
        }else{
          console.log('zou_2222')
          console.log('直接授权')
          uni.getUserInfo({
            desc:'获取数据',
            success:(res)=>{
              console.log(res)
              uni.login({
                success:(lres)=>{
                  console.log(lres)
                }
              })
            }
          })
        }
			},
			hideTan() {
				this.isShow = false
			},
			// 上传头像
			onChooseAvatar(e) {
				console.log('选择的微信头像')
				console.log(e)
				this.avatarUrl = e.detail.avatarUrl
			},
			// 获取昵称
			onChooseName(e) {
				this.userName = e.detail.value;
			},

			// 点击登录
			loginBtn() {
				console.log('昵称是。。。。')
				console.log(this.userName)
				if (this.userName === '') {
					uni.showToast({
						icon: 'none',
						title: '请先获取昵称'
					})
				} else {
          console.log('走没有------')
					this.isShow = false
          uni.setStorageSync('isLogout', 2) //获取到昵称后，就不是退出状态了
          console.log(this.isRegister)
          // 修改昵称
          getUserUpdate(this.openid,'nikename',this.userName).then(res=>{
          })
          // 修改头像
          getUserUpdate(this.openid,'head',this.avatarUrl).then(res=>{
          })
					// uni.setStorageSync('isRegister', true)
          this.userInfo.head = this.avatarUrl
          this.userInfo.nikename = this.userName
					uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
					uni.reLaunch({
						url: '/pages/mine/index'
					});
				}
			},
      // 授权获取手机号
      onGetPhoneNumber(e) {
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          // 用户同意授权获取手机号
          console.log("用户同意授权");
          console.log(e.detail)
          // 处理e.detail.encryptedData和e.detail.iv
          uni.setStorageSync('isLogout', 2)
          uni.reLaunch({
          	url: '/pages/mine/index'
          });
        } else {
          // 用户拒绝授权或者发生其他错误
          console.log("用户拒绝授权或发生错误");
        }
      },
      
      // 点击进去设置页面-如果没有登录-就提示他让他先登录
      goSet(){
        if(this.userInfo.nikename===''){
          uni.showToast({
            icon:'none',
            title:'请先进行登录注册'
          })
        }else{
          uni.navigateTo({
            url:'/packageA/mine/set'
          })
        }        
      }
		}
	}
</script>

<style scoped lang="scss">
	.con {
		background: url('/static/mine/img01.png') no-repeat 340rpx -174rpx;
		background-size: 348rpx 348rpx;
		background-color: #EEEEEE;

		.top {
			width: 100%;
			height: auto;
			padding: 0 0;
			box-sizing: border-box;
			margin: 40rpx 0;
			align-items: normal;
			margin-top: 20rpx;

			.topz_img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.topzc {
        line-height: initial;
				.topzc_v1 {
					color: rgba(16, 16, 16, 1);
					font-size: 40rpx;
					height: 56rpx;
					// line-height: 56rpx;
					margin-bottom: 12rpx;
				}

				.topzc_v2 {
					border-radius: 40rpx;
					background-color: rgba(249, 191, 65, 1);

					.topzc_v2_img {
						width: 104rpx;
						height: 40rpx;
						border-radius: 40rpx 0px 0px 40rpx;
					}

					.topzc_v2_v {
						padding: 0 14rpx;
						padding-right: 20rpx;
						height: 40rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						line-height: 40rpx;
						border-radius: 0px 40px 40px 0px;
						background-color: rgba(249, 191, 65, 1);
						font-family: 'AvantGardeFont';
					}

					.weideng {
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						width: 100%;
						text-align: center;
            padding: 2px 10rpx;;
					}
				}
			}

			.topy {
        align-items: normal;
        margin-top: 17rpx;
		margin-right: 20rpx;
				.topy_img {
					width: 48rpx;
					height: auto;
					margin-left: 40rpx;
          
				}
			}
		}

		.main {
			width: 100%;
			height: auto;

			.main_t {
				width: 100%;
				border-radius: 20rpx 20rpx 0px 0px;
				background-color: rgba(249, 191, 65, 1);
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				height: 110rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				padding-bottom: 20rpx;

				.main_tz {
					.main_tz_img {
						width: 52rpx;
						height: auto;
						margin-right: 12rpx;
					}

					.main_tz_c {
						color: rgba(16, 16, 16, 1);
						font-size: 28rpx;
					}
				}

				.main_tY {
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
					height: 95rpx;
					line-height: 95rpx;
				}
			}

			.main_c {
				width: 100%;
				height: auto;
				background: #fff;
				border-radius: 20rpx;
				margin-top: -20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.main_c1 {
					padding-top: 34rpx;
					align-items: normal;

					.main_c1_t {
						.main_c1_tv1 {
							height: 40rpx;
							line-height: 40rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 28rpx;
							margin-bottom: 6rpx;
						}

						.main_c1_tv2 {
							height: 58rpx;
							line-height: 58rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 48rpx;
							font-family: 'AvantGardeFont';
						}
					}

					.main_c1_y {
						width: 160rpx;
						height: 52rpx;
						border-radius: 40rpx;
						background-color: rgba(0, 0, 0, 1);
						text-align: center;
						line-height: 52rpx;
						text-align: center;

						.main_c1_y_img {
							width: 32rpx;
							height: auto;
							position: relative;
							top: 6rpx;
						}

						.main_c1_y_t {
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							margin-left: 6rpx;
						}
					}
				}

				.main_c2 {
					margin-top: 40rpx;
					padding-bottom: 30rpx;

					.main_c2li {
						width: 210rpx;
						height: 112rpx;
						border-radius: 10rpx;
						background-color: rgba(238, 238, 238, 1);

						.main_c2li_v1 {
							margin-left: 20rpx;
							color: rgba(137, 137, 137, 1);
							font-size: 24rpx;
							height: 34rpx;
							line-height: 34rpx;
							margin-top: 22rpx;
						}

						.main_c2li_v2 {
							margin-left: 20rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 28rpx;
							font-family: 'AvantGardeFont';
						}
					}
				}
			}
		}

		.navList {
			width: 100%;
			height: 140rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			margin: 20rpx 0;

			.navListli {
				width: 25%;
				text-align: center;

				.navListli_img {
					width: 48rpx;
					height: auto;
				}

				.navListli_t {
					height: 40rpx;
					line-height: 40rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
				}
			}
		}

		.mlist {
			width: 100%;
			height: auto;

			.mlistli {
				width: 100%;
				height: 104rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
        font-size: 28rpx;
        padding-left: 34rpx;
				.mlistliz {}

				.mlistliy {
					width: 32rpx;
					height: auto;
				}
			}
		}
	}

	.logint {
		width: 100%;
		height: 680rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		background: #fff;
		text-align: center;

		.pictrue {
			width: 140rpx;
			height: 140rpx;
			margin: 0 auto;
			margin-top: 88rpx;
			margin-bottom: 50rpx;

			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 100%;
			}
		}

		.nicheng {
			width: 680rpx;
			height: 92rpx;
			border-radius: 100rpx;
			background-color: rgba(232, 230, 230, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			margin: 0 auto;
			margin-bottom: 48rpx;
		}

		.logint_btn {
			width: 680rpx;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 100rpx;
			background-color: rgba(249, 191, 65, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			margin: 0 auto;
			margin-bottom: 48rpx;
		}
	}

	button {
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent;
	}

	button::after {
		border: none !important;
	}

	.logint_di {
		width: 100%;
		height: auto;
		justify-content: center;

		.logint_di1 {
			width: 24rpx;
			height: 24rpx;
			background-color: rgba(249, 191, 65, 1);
			text-align: center;
			line-height: 24rpx;
			border-radius: 100%;
			margin-right: 12rpx;

			.logint_di1_img {
				width: 20rpx;
				height: auto;
			}
		}

		.logint_di2 {
			color: rgba(155, 155, 155, 1);
			font-size: 24rpx;
		}
	}
</style>